import React, { useState, useEffect ,useRef} from 'react'
import { Card, Input, Button, Menu, Dropdown, Divider, Table} from 'antd';
import styles from './StationAudit.less'
import { head } from '@umijs/deps/compiled/lodash';
import { DownOutlined } from '@ant-design/icons';
import { ShopData } from '../../api/shop'
import storageUtils from "../../utils/storageUtils"
export default function StationAudit(props) {
    const [data,setData] = useState(0)
    const [list,setList] = useState(0)
    const [text,setText] = useState("展开 ▼")
    const couterRef = useRef()
    const telRef = useRef()
    const nameRef = useRef()
    async function userElement(){
        let arr = [];
        let a = couterRef.current.state.value
        for(var i = 0;i < data.length;i++){
            if(data[i].shopName.indexOf(a) >= 0){
                arr.push(data[i])
            }
        }
        console.log(arr);
        setList(arr)
    }
    function alterText(){
        if(text == "展开 ▼"){
            setText("收入 ▲")
        }else{
            setText("展开 ▼")
        }
    }
    function addData(){
        setList(data)
    }
    // console.log('Liebiao',list);
    function handleButtonClick(e) {
        message.info('Click on left button.');
        console.log('click left button', e);
    }

    function handleMenuClick(e) {
        message.info('Click on menu item.');
        console.log('qqq', e);
    }
    async function getData(){
        let res = await ShopData()
        console.log(res.rows);
        setList(res.rows)
        setData(res.rows)
    }
    const [selectionType, setSelectionType] = useState('checkbox');
    useEffect(()=>{
        console.log(11);
        getData()
    },[])
    const menu = (
        <Menu onClick={handleMenuClick}>
            <Menu.Item key="1">
                导出Excel
            </Menu.Item>
        </Menu>
    );
    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record) => ({
            disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    const columns = [
        {
            title: '充电站名称',
            dataIndex: 'shopName',
            render: (text) => <a>{text}</a>,
        },
        {
            title: '电话',
            dataIndex: 'tel',
        },
        {
            title: '地址',
            dataIndex: 'address',
        },
        {
            title: '身份证号',
            dataIndex: 'idCard',
        },
        {
            title: '负责人',
            dataIndex: 'managerName',
        },
        {
            title: '执照号',
            dataIndex: 'licenceNo',
        },
        {
            title: '状态',
            dataIndex: 'status',
        },
        {
            title: '执照图片',
            dataIndex: 'licenceImg',
            render:(licenceImg)=> <img src={licenceImg} alt="" style={{ height: "40px", width: "40px" }}/>
        },
        {
            title: '操作',
            dataIndex: '',
        },
    ];
    return (
        <div>
            <Card className={styles.all}>
                <div className={styles.head}>
                    <div className={styles.input} ><p>名称:</p><Input ref={couterRef} /></div>
                    <div className={styles.input}><p>手机号:</p><Input ref={telRef} /></div>
                    <div className={styles.input}><p>负责人:</p><Input ref={nameRef}/></div>
                    <Button className={styles.button} onClick={()=>userElement()}>查询</Button>
                    <Button onClick={()=>addData()}>重置</Button>
                    <p onClick={()=>alterText()}>{text}</p>
                </div>
                <div className={text == "展开 ▼" ? styles.showInput:styles.input}><p>执照号:</p><Input ref={nameRef}/></div>
                <div className={styles.head1}>
                    <Button>新增</Button>
                    <Button>删除</Button>
                    <Dropdown overlay={menu}>
                        <Button className={styles.SelectButton}>
                            更多操作 <DownOutlined />
                        </Button>
                    </Dropdown>
                </div>
                <div>
                    <Divider />

                    <Table
                        rowKey='id'
                        rowSelection={{
                            type: selectionType,
                            ...rowSelection,
                        }}
                        columns={columns}
                        dataSource={list}
                       
                    />
                </div>
            </Card>
            {/* <Pagination defaultCurrent={2} total={50} defaultPageSize={5}/> */}
        </div>
    )
}
